<template>
<div :style="{height:w1}" >
  <span style="position: fixed;top:0;left:10px;z-index: 9999;height: 44px;align-items: center;display: flex;" >
    <i class="el-icon-arrow-left" style="font-size: 20px;background-color: white;border-radius: 25px" @click="return1"></i>
  </span>
  <span style="position: fixed;top:0;right:10px;z-index: 9999;height: 44px;align-items: center;display: flex" >
    <i class="el-icon-more" style="font-size: 20px;background-color: white;border-radius: 25px"></i>
  </span>
  <van-tabs ref="tabs" v-model="active" scrollspy sticky style="position: absolute;top: 0;left: 0;width: 100%" id="b1">
  <van-tab name="商品" title="商品">

      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <el-image style="width: 100%; height: 100%" :src="image" fit="cover"></el-image>
        </van-swipe-item>
      </van-swipe>
      <div style="display: flex;align-items: center;padding: 10px 10px 0 10px;justify-content: space-between;background-color: white;">
        <div style="color: red;font-family: JDZH-Regular"><span>￥</span><span style="font-size: 30px">{{detail.price}}</span></div>
        <div style="text-align: right;">
          <div class="container" >
            <div class="item" >
              <div><i class="el-icon-star-off" style="font-size: 20px"></i></div>
              <div style="font-size: 12px">收藏</div>
            </div>
          </div>
        </div>
      </div>

      <div style="padding:0 10px 10px 10px;font-weight: 700;line-height: 21px;background-color: white;border-radius: 0 0 10px 10px;font-size: 16px;">
        {{detail.itemTitle}}
      </div>

  </van-tab>
    <van-tab name="评价" title="评价">
      <div style="background-color: white;border-radius: 10px 10px 10px 10px;margin-top: 10px;padding: 10px;">
      <div style="display: flex">
        <div ><span style="font-size: 15px;font-weight: 700">评论</span><span style="margin-left: 10px;font-size: 12px;font-weight: 600">200+</span></div>
        <div style="margin-left: auto">
          <span style="font-size: 12px;color: #8c8c8c">好评度97% </span><i class="el-icon-arrow-right" style="color: black"></i>
        </div>
      </div>
      <van-button style="background-color: #fcedeb;height: 30px;margin-top: 10px;margin-right: 10px;justify-content: center;display: flex;width: 100%" color="#000;" round  plain @click="ToComment">
        点击查看
      </van-button>
      </div>
    </van-tab>
    <van-tab name="详情" title="详情">
      <div style="background-color: white;border-radius: 10px 10px 0 0;text-align: center;padding-top: 10px;font-size: 13px;font-weight: 700;margin-top: 10px">商品详情</div>
      <img :src="detail.detail" style="width: 100%" v-if="detail.detail">
    </van-tab>
  </van-tabs>
<!--底部栏-->
  <van-goods-action>
    <van-goods-action-icon icon="cart-o" text="购物车" />
    <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
    <van-goods-action-button type="warning" text="加入购物车" />
    <van-goods-action-button type="danger" text="立即购买" @click="buyGood"/>
  </van-goods-action>
  <van-sku
    v-model="showSku"
    :sku="sku"
    :goods="goods"
    @buy-clicked="onBuyClicked"
    @add-cart="onAddCartClicked"
    :hide-stock="sku.hide_stock"
  />
</div>
</template>

<script>
import Vue from 'vue';
import {Swipe, SwipeItem, Toast} from 'vant';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
import { Tab, Tabs } from 'vant';
import { Button } from 'vant';
import request from "../../utils/request";
import { Sku } from 'vant';

Vue.use(Sku);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  data(){
    return{
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '0', // skuValueId：规格值 id
                name: '红色', // skuValueName：规格值名称
                imgUrl: '', // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: '', // 用于预览显示的规格类目图片
              },
              {
                id: '2',
                name: '蓝色',
                imgUrl: '',
                previewImgUrl: '',
              }
            ],
            largeImageMode: false, //  是否展示大图模式
          },
          {
            k: '尺寸', // skuKeyName：规格类目名称
            k_s: 's2', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                name: '红色', // skuValueName：规格值名称
                imgUrl: '', // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl:''
              },
              {
                id: '2',
                name: '蓝色',
                imgUrl: '',
                previewImgUrl: '',
              }
            ],
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 10, // skuId
            s1: '0', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 10000, // 价格（单位分）
            stock_num: 2 // 当前 sku 组合对应的库存
          }
        ],
        price: '1.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 10, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: 'https://m.360buyimg.com/mobilecms/s1265x1265_jfs/t1/169355/21/30709/13723/6395a338Eabdb7f34/16c8d57923ab7ef0.jpg!q70.dpg.webp'
      },
      showSku:false,
      tabs:[{name:"大小适宜",count:20},{name:"手感一流",count:39},{name:"时尚美观",count: 99},{name:"散热性佳",count: 99}],
      active:'商品',
      w1:'100vh',
      images: [],
      detail:{},
    }
  },
  created() {

  },
  mounted() {
    window.addEventListener('scroll', this.onScroll);
    this.getHeight()
    this.getProduct()
  },
  methods:{
    //查看评论
    ToComment(){
      this.$router.push({path:'/comment',query:{id:this.$route.query.i,itemId:this.$route.query.itemId,price:this.$route.query.price}})
    },
    // 加入购物车
    onAddCartClicked(skuData){
      request.post('/cart/addCart',{num:skuData.selectedNum,specificationId:skuData.selectedSkuComb.id,detailId:this.$route.query.i,
        stock:skuData.selectedSkuComb.stock_num}).then(resp=>{
        if (resp.code===0){
          this.showSku=false
        }
          Toast(resp.errorMessage)
      })
    },
    // 下单查询规格
    buyGood(){
      request.post('/specfication/getData',{productId:this.$route.query.i}).then(resp=>{
        if (resp.code===0){
          this.sku=resp.data
          this.goods.picture=this.images[0]
          this.showSku=true
        }
      })
    },
    getProduct(){
      request.post('/productDetails/getDetail',{id:this.$route.query.i}).then(resp=>{
        if (resp.code===0){
          this.detail=resp.data
          this.detail.price=this.$route.query.price
          this.images=[]
          if (this.detail.itemImages.includes(';')){
            for (let i = 0; i < this.detail.itemImages.split(';').length; i++) {
              this.images.push(this.detail.itemImages.split(';')[i])
            }
          }else {
            this.images.push(this.detail.itemImages)
          }
        }
      })
    },
    // 下订单
    onBuyClicked(skuData){
      request.post('/order/takeOrder',{num:skuData.selectedNum,specificationId:skuData.selectedSkuComb.id,detailId:this.$route.query.i,
      stock:skuData.selectedSkuComb.stock_num}).then(resp=>{
        if (resp.code===0){
          this.$router.push({path:'/appOrder',query:{orderId:resp.data,i:this.$route.query.i,itemId:this.$route.query.itemId,price:this.$route.query.price}})
        }
      })
    },
    return1(){
      if (this.$route.query.type==0){
        this.$router.push('/apphome')
        return
      }
      this.$router.push({
        name: 'approduct', // 商品页的路由名称
        query: {
          i:this.$route.query.itemId
        }
      });
    },
    onScroll() {
      const tabsContainer = this.$refs.tabs.$el.querySelector('.van-tabs--line .van-tabs__wrap');
      if (document.documentElement.scrollTop > 0 || document.body.scrollTop > 0) {
        tabsContainer.style.display = 'block';
      }else {
        tabsContainer.style.display = 'none';
      }
    },
    getHeight() {
      this.$nextTick(() => {
        const e1 = document.getElementById('b1');
        let height = e1.offsetHeight;
        if (height > Math.round(window.innerHeight * 0.01)) {
          this.w1 = height + 'px'
        }
      });
    }
    },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll);
  },

}
</script>

<style scoped>
>>> .van-tabs{
  background-color: #eeeeee;
}
>>> .van-tabs--line .van-tabs__wrap{
  display:none;
}
>>> .van-swipe-item{
  height: 45vh;
}
.container {
  flex-wrap: wrap; /* 当子元素超过一行时进行换行 */

}
>>> .van-button{
  border-color: #fcedeb!important;
}
>>> .van-button--normal{
  font-size: 11px!important;
}
.item {
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}
</style>
